<template>
  <div>
    <TopNav title="栏目管理" />
    <div class="del">
      <h4>点击删除以下频道</h4>
      <div class="list">
        <div
          class="item"
          v-for="(category, index) in delcategoryList"
          @click="del(index)"
          :key="category.id"
        >
          {{ category.name }}
        </div>
      </div>
    </div>
    <div class="add">
      <h4>点击添加以下频道</h4>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in addcategoryList"
          @click="add(index)"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
export default {
  components: { TopNav },
  data() {
    return {
      delcategoryList: [],
      addcategoryList: [],
    };
  },
  watch: {
    //   监听栏目管理数组 一旦发生改变就储存进本地
    delcategoryList() {
      localStorage.setItem(
        "delcategoryList",
        JSON.stringify(this.delcategoryList)
      );
    },
    addcategoryList() {
      localStorage.setItem(
        "addcategoryList",
        JSON.stringify(this.addcategoryList)
      );
    },
  },
  created() {
    //   请求前先获取本地的栏目管理数据 若没有再做请求
    if (localStorage.getItem("delcategoryList")) {
      this.delcategoryList = JSON.parse(
        localStorage.getItem("delcategoryList")
      );
      if (localStorage.getItem("addcategoryList")) {
        this.addcategoryList = JSON.parse(
          localStorage.getItem("addcategoryList")
        );
      }
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data.data);
        this.delcategoryList = res.data.data;
      });
    }
  },
  methods: {
    del(index) {
      if (index === 0) {
        this.$toast("关注不能删哦");
      } else {
        this.addcategoryList.push(this.delcategoryList[index]);
        this.delcategoryList.splice(index, 1);
      }
    },
    add(index) {
      this.delcategoryList.push(this.addcategoryList[index]);
      this.addcategoryList.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14 / 360 * 100vw;
  color: #333;
  padding: 10 / 360 * 100vw 20 / 360 * 100vw;
}
.list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10 / 360 * 100vw;
  .item {
    font-size: 16 / 360 * 100vw;
    padding: 8 / 360 * 100vw 12 / 360 * 100vw;
    border: 1px solid #000;
    margin: 5 / 360 * 100vw 10 / 360 * 100vw;
  }
}
</style>